<template>
	<div class="center">
		<div  class="entry_container">
			<k-header v-show="showSearch" headTitle="报告中心" goBack="" rightTitle="筛选" @rightClick="filtershow"></k-header>
			<boxconfirm content_title="此报告需在电脑端进行查看" content_confirm="确定" content_cancel="取消" ref="boxconfirm"></boxconfirm>
			<boxconfirm content_title="完成个人认证，可试用背调功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goMember" ref="bboxconfirm"></boxconfirm>
			<boxconfirm content_title="完成企业认证，启用背调全部功能" content_confirm="去认证" content_cancel="取消" @confirmClick="goCompany" ref="bbboxconfirm"></boxconfirm>

			<div :class="headIos?'archieve_wrapper-ios':'archieve_wrapper'">
				<input class="archieve_input _input" @click="oSearch" placeholder="请输入姓名搜索">
				<div class="archieve_search" @click="oSearch">搜索</div>
				<img class="archieve_img" @click="oSearch" src="../../assets/img/reference/report-center-glass.png"/>
			</div>
			<div :class="headIos?'archieve_details-ios':'archieve_details'">
				<scroller
			        :on-refresh="refresh"
			        refreshText="拼命加载中"
			        :on-infinite="infinite"
			        noDataText=""
			        ref="stop"
              v-if="!no_show"
        >
			        <div v-if="secretFilesList">
				        <div class="archieve_list" @click="showDetail(item)" v-for="item in secretFilesList" :key="item.id">
							<div class="archieve_listf">
								<div class="listf_details">
									<div class="listf_detailsName">{{item.name}}</div>
									<div class="listf_detailsStatus" :class="item.reportStatus | reportStatusClass(item.abnormalStatus,item.reportStatus)">{{item.reportStatus | reportStatus(item.abnormalStatus,item.reportStatus)}}</div>
								</div>
								<div class="listf_data">{{item.createTime}}</div>
							</div>
							<div class="archieve_listr" v-if="item.reportStatus ==='PASSED'">
								<div v-show="item.isRead==='0'" class="archieve_listrn">未读</div>
								<div v-show="item.isRead==='1'" class="archieve_listrn archieve_listrr">已读</div>
							</div>
						</div>
					</div>

				</scroller>
				<div v-show="no_show" class="noMassage">
					<img src="../../assets/img/no-massage.png" alt="">
					<p>无报告信息</p>
				</div>
				
				<div @click="goMember" v-show="blur_search" class="noMassage">
					<img src="../../assets/img/no-massage.png" alt="">
					<p>无搜索报告，返回报告中心。</p>
				</div>

			</div>

			<!--<router-link class="start_check" to="startcheck"></router-link>-->
			<button v-if="showStart" class="start_check" @click="gostartcheck"></button>


			<div v-show="!showSearch"  class="entry_containerr">
				<k-header headTitle="筛选" goBack="" rightTitle="关闭" @rightClick="filterhide"></k-header>
				<div :class="headIos?'archieve_swrapper-contaier-ios':'archieve_swrapper'">
					<div class="archieve_swrapper_title">背景调查</div>
					<checker v-model="reportStatus" type="checkbox" default-item-class="_item" selected-item-class="_item-selected">
						<checker-item value="NORMAL">正常报告</checker-item>
						<checker-item value="UNUSUAL">问题报告</checker-item>
						<checker-item value="REVIEW" style="margin-right: 0;">待生成</checker-item>
						<checker-item value="UNCOMMITTED">未提交</checker-item>
						<checker-item value="UNPAY">待支付</checker-item>
						<checker-item value="UNAUTH" style="margin-right: 0;">待审核</checker-item>
						<checker-item value="AUTHOVER">授权过期</checker-item>
						<checker-item value="REFUSEAUTH">授权未通过</checker-item>
						<checker-item value="AUTHDISPASS" style="margin-right: 0;">资料错误</checker-item>
					</checker>
					<!-- <span>{{reportStatus}}</span> -->
					<button :disabled="dis" @click="archieve" class="archieve_confirm">确定</button>
					<button @click="reset" class="archieve_reset">重置</button>
				</div>

				<div class="shade" @click="filterhide"></div>
			</div>
		</div>

	</div>
</template>

<script>
	import { Rater, Checker, CheckerItem } from 'vux'
	import kHeader from '../common/head';
	import BScroll from 'better-scroll';
	import boxconfirm from '../common/boxconfirm';
	import util from '../../libs/util';
	var page =1;
  	var firstLoaded = false;
	export default {
		data () {
			return {
				showSearch:true,
				dis : false,
				seacchList:[],
				reportStatus:[],
				secretFilesList:[],
				searchname:'',
				isRead:'',
				companyIsAuth:'',
				memberIsAuth:'',
				isselfSearch:'',
				selfExaminationTimesState:'',
				realName:'',
				mobile:'',
				idCard:'',
				headIos:false,
				searchName:'',
				no_show:false,
				showStart:false,
				blur_search:false,
			}
		},
		components:{
			kHeader,
			BScroll,
			Rater,
			Checker,
			CheckerItem,
			boxconfirm
		},
		created() {
			if (window.navigator.userAgent.indexOf('LBLSIOS') > -1) {
				this.headIos = true
			} else {
				this.headIos = false
			};
			page = 1;
			var that = this;
			if(this.$route.params.realName){
				this.ssearchname();
			}else{
				firstLoaded = true;
				if (this.$route.query.donot == '1') {
					page = 1;
					this.reportStatus = ["NORMAL", "UNUSUAL"];
					this.isRead=0;
					this.searchName = '';
					var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
					let data = { page: page, reportStatusList: "NORMAL,UNUSUAL", isRead: 0 };
					util.ajax.post(url, data).then(function(data) {
						if (data.data.code == 0) {
							that.showStart=true;
							that.secretFilesList = data.data.res.data;
							// console.log(that.secretFilesList,111111);
							if (that.secretFilesList.length < 1) {
								that.no_show = true;
							}
						}
					}).catch(function(error) {
						console.log(error)
					})
				} else if (this.$route.query.donot == '2') {
					page = 1;
					this.isRead = '';
					this.searchName = '';
					this.reportStatus = ["REFUSEAUTH","AUTHDISPASS","AUTHOVER"]
					var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
					let data = { page: page, reportStatusList: "REFUSEAUTH,AUTHDISPASS,AUTHOVER" };
					util.ajax.post(url, data).then(function(data) {
						if (data.data.code == 0) {
							that.secretFilesList = data.data.res.data;
							that.showStart = true;
								// console.log(that.secretFilesList, 111112);
							if (that.secretFilesList.length < 1) {
								that.no_show = true;
							}
						}
					}).catch(function(error) {
						console.log(error)
					})
				} else if (this.$route.query.donot == '3') {
					page = 1
					this.isRead = '';
					this.searchName = '';
					this.reportStatus = ["UNUSUAL"]
					var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
					let data = { page: page, reportStatusList: "UNUSUAL" };
					util.ajax.post(url, data).then(function(data) {
						if (data.data.code == 0) {
							that.isAuth = data.data.res.isAuth;
							that.isselfSearch = data.data.res.selfExaminationTimesState;
							that.secretFilesList = data.data.res.data;
							that.showStart = true;
								// console.log(that.secretFilesList, 111113);
							if (that.secretFilesList.length < 1) {
								that.no_show = true;
							}
						}
					}).catch(function(error) {
						console.log(error)
					})
				}else{
					this.axIos();
				}
			}
		},
		filters:{
			reportStatus:function(value1,value2){
				if(value1 ==='PASSED'){
					if(value2==='0'){
						return '正常报告';
					}else{
						return '异常报告';
					}
				}else if(value1 =='REVIEW'){
					return '待生成';
				}else if(value1 =='UNPAY'){
					return '待支付';
				}else if(value1 =='REFUSEAUTH'){
					return '授权未通过';
				}else if(value1 =='AUTHOVER'){
					return '授权过期';
				}else if(value1 =='UNAUTH'){
					return '待审核';
				}else if(value1 =='UNCOMMITTED'){
					return '未提交';
				}
			},
			reportStatusClass:function(value1,value2){
				if(value1 =='PASSED'){
					if(value2=='0'){
						return 'status_normal';
					}else{
						return;
					}
				}else if( value1 =='UNCOMMITTED'){
					return 'status_un';
				}else if(value1 =='UNPAY'){
					return 'status_unpay';
				}else if(value1 =='REFUSEAUTH'){
					return 'status_expire';
				}else if(value1 =='AUTHOVER'){
					return 'status_expire';
				}else if(value1 =='UNAUTH'){
					return 'status_un';
				}else if(value1 =='REVIEW'){
					return 'status_review';
				}
			}
		},
		methods:{
			/*开始背调*/
			gostartcheck:function(){
				// console.log(this.companyIsAuth,this.selfExaminationTimesState,this.companyIsAuth,this.companyIsAuth)
				if(this.companyIsAuth==='1'){
					this.$router.push({ path: '/startcheck'})
				}else{
					if(this.memberIsAuth ==='1'){
						if(this.selfExaminationTimesState==='1'){
							this.$refs.bbboxconfirm.show();
						}else{
							this.$router.push({ path: '/selfService',query: {name:this.realName,idCard:this.idCard,mobile:this.mobile}})
						}
					}else{
						this.$refs.bboxconfirm.show();
					}
				}
			},
			/*跳转报告中心*/
			gocenter:function(){
				alert();
				this.$router.push({ path: '/archivecenter' })
			},
			/*跳转个人认证*/
			goMember:function(){
				this.$router.push({ path: '/userCertification'})
			},
			/*跳转企业认证*/
			goCompany:function(){
				this.$router.push({ path: '/userEnterprise'})
			},
			/*显示遮罩*/
			filtershow: function() {
				// console.log(11);
				// console.log(!firstLoaded, 3453);
				this.showSearch = false;
			},
			filterhide:function(){
				// console.log(12);
				// console.log(!firstLoaded, 3454);
				this.showSearch = true;
			},
	        /*筛选*/
			archieve:function(){
				this.searchName='';
				this.dis=true;
				page=1;
				this.isRead='';
	        	this.showSearch = !this.showSearch;
	            var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
	            let data = {page:page,reportStatusList:this.reportStatus.toString()};
	            var that = this;
	            util.ajax.post(url, data).then(function(data){
	                if(data.data.code == 0){
										that.secretFilesList = data.data.res.data;
										that.dis = false;
										firstLoaded=true;
										// console.log(!firstLoaded, 3454);
	                }
	            }).catch(function(error){
	              console.log(error)
	            })
	        },
	        /*重置*/
	        reset:function(){
            	this.reportStatus=[];
	        },
	        /*上拉刷新*/
	        refresh(){
//	        	this.$router.go(0);
	            var that = this;
	            firstLoaded = true;
	            var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
	            let data = {page:1};
	            util.ajax.post(url, data).then(function(data){
	                // console.log(data,777)
	                if(data.data.code == 0){
		                that.secretFilesList = data.data.res.data;
		                that.reportStatus=[];
		                page=1;
		                that.$refs.stop.finishPullToRefresh()
	                }
	            }).catch(function(error){
	              console.log(error)
	            })
			 		},
			//上啦加载
	        infinite(){
	        	// console.log(!firstLoaded,3452)
	            // this.$refs.stop.finishInfinite(true)
	            if (!firstLoaded) {
	                this.$refs.stop.finishInfinite();
	                return;
	            }else {
								page++;
	            	console.log('page'+page)
	            	var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
	            	let data = {page:page,reportStatusList:this.reportStatus.toString(),isRead:this.isRead,name:this.searchName};
	            	var that = this;
	            	util.ajax.post(url, data).then(function(data){
	            		// console.log(data,998);
	            		if(data.data.code === '0'){
	            			if(data.data.res.data.length !== 0){
													if(that.secretFilesList ==''){
															setTimeout(function() {
																that.secretFilesList = that.secretFilesList.concat(data.data.res.data);
																that.showStart = true;
															}, 150)
													}else{
														that.secretFilesList = that.secretFilesList.concat(data.data.res.data);
														that.showStart = true;
													}
			                    that.$refs.stop.finishInfinite();
			                }else {
			                    that.$refs.stop.finishInfinite(true)
			                };
	            		};
	            	}).catch(function(error){
		                console.log(error)
		            })
	            }
	        },
	        getParmis(name){

	        },
	        showDetail(item){
						if(item.isAuthPassed==='0'){
							if (item.reportStatus === 'PASSED') {
							this.$router.push({ path: '/archieveDetails', query: { id: item.id } })
						} else if (item.reportStatus === 'UNCOMMITTED' || item.reportStatus === 'UNPAY') {
							this.$router.push({ path: '/startcheck', query: { name: item.name, idCard: item.idCard, mobile: item.mobile, sourceType: item.sourceType } })
						} else {
							this.$router.push({ path: '/abnoemal', query: { id: item.id } })
						}
						}else{
							this.$router.push({ path: '/abnoemal', query: { id: item.id } })
						}
	        },
	        /*进入页面调接口*/
	        axIos(){
						this.searchName = '';
	        	var that = this;
		        var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
						let data = {page:1};
						this.isRead='';
		        util.ajax.post(url, data).then(function(data){
	                if(data.data.code==='0'){
	                	that.companyIsAuth = data.data.res.companyIsAuth;
	                	that.idCard = data.data.res.idCard;
	                	that.memberIsAuth = data.data.res.memberIsAuth;
	                	that.mobile = data.data.res.mobile;
	                	that.realName = data.data.res.realName;
	                	that.selfExaminationTimesState = data.data.res.selfExaminationTimesState;
										that.secretFilesList = data.data.res.data;
										that.showStart=true;
										if(that.secretFilesList.length < 1){
											that.no_show =true;
										}
	                	// console.log(that.secretFilesList,9992)
		                firstLoaded = true;
	                }else{

	                }

	            }).catch(function(error){
	               console.log(error)
	            })
	        },
	        /*搜索*/
	        oSearch(){
	        	firstLoaded = false;
	        	this.$router.push({path:'/archiveSeaech'})
			},
			//模糊搜索
			ssearchname(){
				// console.log(this.$route.params.realName);
				this.isRead = '';
        		var url = '/lblsapp-h5/v2/report/queryReqCreditReportList.json';
							let data = {page:1,name:this.$route.params.realName};
							this.searchName = this.$route.params.realName;
	            var that = this;
            	util.ajax.post(url, data).then(function(data){
            		// console.log(data.data.res.data);
	                if(data.data.code==='0'){
										firstLoaded = true;
										that.companyIsAuth = data.data.res.companyIsAuth;
										that.idCard = data.data.res.idCard;
										that.memberIsAuth = data.data.res.memberIsAuth;
										that.mobile = data.data.res.mobile;
										that.realName = data.data.res.realName;
										that.selfExaminationTimesState = data.data.res.selfExaminationTimesState;
										that.secretFilesList = data.data.res.data;
										that.showStart=true;
										if (that.secretFilesList.length < 1) {
											that.blur_search=true;
										}
	                }else{

	                }
	            }).catch(function(error){
	               console.log(error)
	            })
	        }
		},

	}
</script>

<style scoped>
	/*添加没有报告中心*/
	.noMassage{
		z-index: 99;
    height: 100%;
  }
  .noMassage img{
    display: block;
    width:4.5rem;
    height:14rem;
    padding-top: 36%;
    margin: auto;
  }
  .noMassage p{
    font-size: 14px;
    color: #808080;
    letter-spacing: 0;
    text-align: center;
    padding-top: 8%;
  }
	.submitBtn {
	    margin-top: 20px;
	    width: 100%;
	}
	.submitBtn div{
	    height: 30px;
	    width: 80%;
	    margin: auto;
	    text-align: center;
	    line-height: 30px;
	    color: white;
	    background: #f89721;
	    border-radius: 8px;
	}
	.entry_containerr{
		height: 100%;
		width: 100%;
		position: fixed;
		background: rgba(0,0,0,0.6);
		top: 0;
		bottom: 0;
		z-index: 9;
	}
	.entry_containerr-ios{
		height: 100%;
		width: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		bottom: 0;
		z-index: 9;
		padding-top:65px;
	}
	.center{
		width: 100%;
		height: 100%;
	}
	.archieve_wrapper{
	    background: rgb(244,244,244);
	    display: flex;
	    width: 100%;
	    height: 68px;
	    box-sizing: border-box;
	    padding: 13px 4% 13px;
	    position: fixed;
			top: 45px;
	}
	.archieve_wrapper-ios{
		background: rgb(244,244,244);
	    display: flex;
	    width: 100%;
	    height: 68px;
	    box-sizing: border-box;
	    padding: 13px 4% 13px;
	    position: fixed;
			top: 65px;
	}
	.archieve_input{
		flex: 1;
		margin: 0;
		background: #ffffff;
    	outline: none;
    	border: none;
    	padding-left: 10% ;
	}
	.archieve_search{
		flex: 0 0 10.8%;
		text-align: right;
		color: #FF790E;
		height: 42px;
		line-height: 42px;
		font-size: 1.4rem;
	}
	.archieve_img{
		position: absolute;
		width: 4.3%;
		left: 6%;
		top: 39%;
	}
	.archieve_details{
		top: 118px;
		position: fixed;
		width: 100%;
		bottom: 53px;
		overflow: hidden;
	}
	.archieve_details-ios{
		position: fixed;
		top: 138px;
		width: 100%;
		bottom: 53px;
		overflow: hidden;
	}
	.archieve_list{
		display: flex;
		width: 100%;
		height: 68px;
		padding: 13px 4%;
		box-sizing: border-box;
		background: #FFFFFF;
		border-bottom: 1px solid rgb(244,244,244);
	}
	.archieve_listf{
		flex: 1;
	}
	.archieve_listr{
		flex: 0 0 10.8%;
	}
	@media screen and (max-width: 330px) {
	    .archieve_listr{
			flex: 0 0 12.8%;
		}
	}
	.listf_details{
		display: flex;
	}
	.listf_detailsName{
		display: inline-block;
		height: 20px;
		line-height: 20px;
		font-size: 1.4rem;
		color: #212121;
		margin-right: 10px;
	}
	.listf_detailsStatus{
		display: inline-block;
	    height: 15px;
	    line-height: 15px;
	    font-size: 1rem;
	    background: rgba(255,98,76,1);
	    color: #FFFFFF;
	    margin-top: 2px;
	    padding: 0px 6px;
	    box-sizing: border-box;
	    border-radius: 8px;
	}
	 /*状态颜色*/
	.status_normal{
		background: rgba(86,196,1,1);
	}
	.status_un{
		background: rgba(194,194,194,1);
	}
	.status_unpay{
		background: rgba(243,159,56,1);
	}
	.status_review{
		background: rgba(68,165,210,1);
	}
	.status_expire{
		background: none;
		border: 1px  solid #F39F38;
		color: #F39F38;
	}
	.listf_data{
		margin-top: 6px;
		font-size: 12px;
		color: #808080;
	}
	.archieve_listrn{
	    margin-top: 12px;
	    box-sizing: border-box;
	    height: 17px;
	    font-size: 1.2rem;
	    line-height: 17px;
	    color: #FF790E;
	    width: 100%;
	    padding-right: 26%;
	    background-size: 26% 16px;
	    background-position: right;
		background-image: url(../../assets/img/reference/jiantour.png);
		background-repeat: no-repeat;
	}
	.archieve_listrr{
		color: #808080;
	}
	.start_check{
		position: fixed;
	    width: 8rem;
		height: 8rem;
		bottom: 8rem;
		right: 2%;
	    text-align: center;
	    background: url(../../assets/img/reference/goback.png) no-repeat center;
	    background-size: cover;
	    border: none;
	}
	.shade{
	    position: fixed;
	    width: 100%;
	    left: 0;
	    height: 44.5%;
	    top: 55.5%;
	    z-index: 999;
	    bottom: 0;
	}
	.archieve_swrapper{
		padding: 58px 5.3% 25px;
		background: #FFFFFF;
	}
	.archieve_swrapper-contaier-ios{
		padding: 78px 5.3% 25px;
		background: #FFFFFF;
	}
	.archieve_swrapper_title{
		height: 43px;
		line-height: 43px;
		font-size: 1.4rem;
		color: #808080;
	}
	.select_item{
		width: 100%;
		font-size: 0;
	}
	.select_item li{
		list-style: none;
		display: inline-block;
		width: 30%;
		height: 38px;
		margin-right: 5%;
		border: 1px solid #D7D7D7;
		box-sizing: border-box;
		font-size: 1.4rem;
		text-align: center;
		line-height: 38px;
		color: #808080;
		margin-bottom: 20px;
	}
	.select_item li:nth-child(3n){
		margin-right: 0;
	}
	.select_item li.cur{
		color: #FF790E;
		border: 1px solid #F89721;
	}
	.archieve_confirm{
		width: 43%;
		height: 44px;
		text-align: center;
		line-height: 44px;
		margin: 0 2.7%;
		background: #F89721;
		border-radius: 4px;
		font-size: 1.6rem;
		color: #FFFFFF;
		border: none;
		box-sizing: border-box;
	}
	.archieve_reset{
		width: 44%;
		height: 44px;
		text-align: center;
		line-height: 44px;
		margin: 0 2.7%;
		background: #FFFFFF;
		border-radius: 4px;
		font-size: 1.6rem;
		color: #808080;
		border: none;
		border: 1px solid #CDCDCD;
		box-sizing: border-box;
	}
	._item{
	    display: inline-block;
	    width: 30%;
	    height: 38px;
	    margin-right: 3.7%;
	    border: 1px solid #D7D7D7;
	    box-sizing: border-box;
	    font-size: 1.4rem;
	    text-align: center;
	    line-height: 38px;
	    color: #808080;
	    margin-bottom: 20px;
	 }
    ._item-selected{
	    color: #FF790E;
	    border: 1px solid #F89721;
    }
</style>
